<template>
  <view class="container">
    <view class="content">
      <view class="logo-wrapper">
        <u-icon name="account" size="60" color="#42b479" :custom-style="{marginBottom: '20rpx',marginTop: '120rpx'}"></u-icon>

        <text class="sub-text">创建您的账户</text>
      </view>

      <view class="wrapper">
        <view class="input-content">
          <u-form :model="form" ref="uForm">
            <u-form-item>
              <u-input placeholder="请输入用户名" v-model="form.account" type="text"
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="account" size="40" color="#999"></u-icon>
            </u-form-item>

            <u-form-item>
              <u-input type="password" placeholder="请输入密码" v-model="form.password"
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="lock" size="40" color="#999"></u-icon>
            </u-form-item>

            <u-form-item>
              <u-input type="password" placeholder="确认密码" v-model="form.password1"
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="lock" size="40" color="#999"></u-icon>
            </u-form-item>

            <u-form-item>
              <u-input placeholder="邀请码" v-model="form.invite_code"
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="gift" size="40" color="#999"></u-icon>
            </u-form-item>

            <u-form-item class="captcha_box">
              <u-input v-model="form.captcha_code" placeholder="请输入验证码"
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="photo" size="40" color="#999"></u-icon>
              <image slot="right" class="captcha" @click="getCaptcha()" :src="captcha.img" mode="aspectFit"></image>
            </u-form-item>
          </u-form>
        </view>

        <button class="confirm-btn" :disabled="!form.agree" @click="register()">注册</button>

        <view class="agreement-section">
          <label class="agreement-label">
            <u-checkbox
              class="agreement-checkbox"
              v-model="form.agree"
              active-color="#42b479"
              size="36">
            </u-checkbox>
            <text class="agreement-text">我已阅读并同意</text>
          </label>
          <text class="agreement-link" @click="gotoPath('/pages/packageA/h5/article?key=register',false)">《注册协议》</text>
          <text class="agreement-text">和</text>
          <text class="agreement-link" @click="gotoPath('/pages/packageA/h5/article?key=privacy',false)">《隐私政策》</text>
        </view>
      </view>

      <view class="bottom-section">
        <text @click="gotoPath('/pages/login/index',false)" class="bottom-link">已有账号？立即登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import code_api from "@/common/code_api";
import user_api from "@/common/user_api";
export default {
  data() {
    return {
      form: {
        agree: false,
        account: '',
        password: '',
        password1: '',
        invite_code: '',
        captcha_key: '',
        captcha_code: '',
      },
      disabled: false,
      captcha: {
        img: "",
        key: ""
      }
    }
  },
  onLoad() {
    this.getCaptcha()
  },
  methods: {
    getCaptcha() {
      code_api.captcha().then(res => {
        this.captcha = res.data.captcha
      })
    },
    register() {
      if (!this.form.agree){
        this.$u.toast('请先同意注册协议')
        return
      }
      if (!this.form.account) {
        this.$u.toast('请输入账号');
        return
      }
      if (this.form.password !== this.form.password1) {
        this.$u.toast('两次密码不一致');
        return
      }
      let data = {
        ...this.form
      }
      data.captcha_key = this.captcha.key
      user_api.register(data).then(res => {
        if (res.code !== 0) {
          this.$u.toast(res.msg);
          this.getCaptcha()
        } else {
          this.$u.toast('注册成功');
          let that = this
          setTimeout(function () {
            uni.navigateTo({
              url: '/pages/login/index?account=' + that.form.account,
              fail: (err) => {
                console.log('失败',err)
              }
            })
          }, 1000)
        }
      })
    }
  },
}
</script>

<style lang='scss'>
.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

.content {
  width: 90%;
  max-width: 650rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0;
  box-sizing: border-box;
}

.logo-wrapper {
  text-align: center;
  margin-bottom: 50rpx;

  .welcome-text {
    font-size: 42rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 15rpx;
    display: block;
  }

  .sub-text {
    font-size: 30rpx;
    color: #999;
    display: block;
  }
}

.wrapper {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 100%;
  box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
  box-sizing: border-box;
}

.input-content {
  margin-bottom: 30rpx;

  ::v-deep .u-form-item {
    padding: 10rpx 0;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .u-input {
      background-color: #f8f9fa;
      border-radius: 14rpx;
      padding-left: 24rpx;
      height: 80rpx;
      font-size: 32rpx;
    }
  }
}

.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background: linear-gradient(90deg, #42b479 0%, #3aa36b 100%);
  color: #fff;
  font-size: 36rpx;
  margin-top: 20rpx;

  &:after {
    border: none;
  }

  &[disabled] {
    background: #c0c4cc;
  }
}

.agreement-section {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  .agreement-label {
    display: flex;
    align-items: center;
    margin-right: 12rpx;
  }

  ::v-deep .u-checkbox {
    margin-right: 12rpx;
  }

  .agreement-text {
    font-size: 28rpx;
    color: #999;
  }

  .agreement-link {
    color: #42b479;
    margin: 0 8rpx;
    cursor: pointer;
    font-size: 28rpx;
  }
}

.bottom-section {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .bottom-link {
    color: #42b479;
    font-size: 30rpx;
    cursor: pointer;
    padding: 0 15rpx;
  }
}

.captcha_box {
  .captcha {
    width: 200rpx;
    height: 70rpx;
    border-radius: 10rpx;
  }
}

// 隐藏原有元素
.title,
.register-section,
.wx,
.xieyi {
  display: none;
}
</style>
